<template>
    <div>
        <van-nav-bar class="bj" title="注册/登录" left-arrow @click-left="onClickLeft"/>
        <div>
            <van-form>
                    <van-field v-model="tel" left-icon="shouji" name="pattern" placeholder="请输入手机号" :rules="[{ pattern, message: '请输入正确内容' }]">
                        <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="shouji"></van-icon>
                    </van-field>
            </van-form>
            <van-form>
                <van-field left-icon="yanzheng" v-model="yzm" placeholder="请输入验证码">
                    <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="yanzheng"></van-icon>
                    <template #button>
                        <van-button round size="mini" @click="getYzm">发送验证码</van-button>
                    </template>
                </van-field>
            </van-form>
            <van-form>
                <van-field v-model="mes" left-icon="mima" placeholder="请输入密码">
                    <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="mima"></van-icon>
                </van-field>
            </van-form>
        </div>
        <van-button class="an" type="primary" block @click="qwer">提交</van-button>
    </div>
</template>
<script>

export default {
    data() {
        return {
            tel:'',
            yzm:'',
            mes:'',
            pattern: /\d{11}/
        };
    },
    methods: {
        onClickLeft() {
            this.$router.push('/enroll')
        },
        getYzm(){
            this.$http.post('/user/sendSms',{
                mobile:this.tel,
                type:'register'
            })
            .then((res)=>{
                console.log(res)
            })
        },
        qwer(){
            this.$http.post('/user/reg',{
                username:this.tel,
                password:this.mes,
                vercode:this.yzm
            })
            .then((res)=>{
                console.log(res)
                this.$router.push('/enroll')
            })
        }
    }
}
</script>
<style>

.van-nav-bar__title{
    font-size: 18px;
    color: #fff;
}
.van-nav-bar .van-icon{
    color: #fff;
}
.bj{
    width: 100%;
    height:46px;
    background-color: rgb(7,193,96);
}
.an{
    height: 50px;
    width: 90%;
    display:block;
    margin:0 auto;
    background-color: rgb(7,193,96);
}
</style>